<template>
	<view class="home">
		<!-- 
			顶部导航菜单
			
			list是导航栏数据
			activeStyle自定义被选中样式
			inactiveStyle自定义未被选中样式
			@click点击事件, 参数就是list中对应的数据对象
		-->
		<view class="topnav">
			<u-tabs :list="navList" :activeStyle="{
						color: '#333',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#888',
						transform: 'scale(1)'
					}" @click="clickNav"></u-tabs>
		</view>
		<!-- 
				骨架屏
				
				title(可选)，是否显示标题占位行，该占位行不布满全屏宽度，同时与段落的距离较大以做明显区分
				avatar(可选)，是否在左上角位置显示圆形的头像占位区域
				rows(可选)，段落的行数
				loading(必选)，是否加载中状态，如果为true 则显示骨架屏组件占位，否则显示插槽中的内容
			 -->
		<view class="loadingState">
			<u-skeleton rows="5" title loading avatar v-show="loadingState"></u-skeleton>
		</view>

		<!-- 内容区域 -->
		<view class="content" v-show="!loadingState">
			<view class="item" v-for="item in dataList">
				<blog-item :item="item"></blog-item>
			</view>
		</view>

		<!-- 右下角浮动编辑按钮 -->
		<view class="edit" @click="goEdit">
			<text class="iconfont icon-a-21-xiugai"></text>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();

	export default {
		data() {
			return {
				navList: [{
					name: '最新',
					type: "publish_date"
				}, {
					name: '热门',
					type: "view_count"
				}],
				navAction: 0,
				loadingState: true,
				dataList: []
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			getData() {
				this.loadingState = true;
				let artTemp = db.collection("quanzi_article").field(
					"title,user_id,description,picurls,comment_count,like_count,view_count,publish_date").getTemp();
				let userTemp = db.collection("uni-id-users").field("_id,username,nickname,avatar_file").getTemp();
				db.collection(artTemp, userTemp).orderBy(this.navList[this.navAction].type, "desc").get().then(res => {
					console.log(res);
					this.dataList = res.result.data;

					this.loadingState = false;
				})
			},
			clickNav(event) {
				console.log(event);
				this.navAction = event.index;
				this.getData();
			},
			goEdit() {
				uni.navigateTo({
					url: "/pages/edit/edit"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.topnav {
			margin-bottom: 30rpx;
		}

		.loadingState {
			padding: 30rpx;
		}

		.content {
			.item {
				padding: 30rpx;
				border-bottom: #F7F7F7 15rpx solid
			}
		}

		.edit {
			width: 120rpx;
			height: 120rpx;
			background: #0199FE;
			border-radius: 50%;
			color: #fff;
			position: fixed;
			z-index: 100;
			bottom: 150rpx;
			right: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 20rpx rgba(1, 153, 254, 0.8);

			.iconfont {
				font-size: 50rpx;
			}
		}
	}
</style>